Fox 3.0 Router link导航

link导航

Fox router框架可以通过fox-link和fox-router-view这两个内置的组件，实现页面导航。 例子如下：

例子代码：sites/example/pages/link-navigate-to 例子说明：index.ts进行了路由组成，而index.vue中fox-link+fox-router-view进行了link路由导航演示

index.ts（路由表注册）

/*
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-07-25 12:59:49
 */

import { defineComponent, h} from 'vue'

//创建组件dog
const Dog = defineComponent({
    setup(){
        return ()=>{
           return h('div',{}, ['this is a dog'])
        }
    }
 })

//创建组件car
const Car = defineComponent({
    setup(){
        return ()=>{
           return h('div',{}, ['this is a car'])
        }
    }
 })


 //路由表
let routes = [
    {
        path:'/',
        redirect:'/dog'
    },
    {
        path:'/dog',
        component:Dog,
    },
    {
        path:'/car',
        component:Car,
    }
]

//Fox App
export let FoxApp = {

    /***
     * 安装
     */
    install(fox:any){
        //加入路由
        fox.router.addRoutes(routes)
    }
} 

index.vue（路由演示）

<!--
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-07-25 12:59:40
-->
<template>
    <div class="link-items">
        <fox-router-link class="my-link" active-class="fox-router-link-active" tag='a' to='/dog'>go home</fox-router-link>
        <fox-router-link class="my-link" active-class="fox-router-link-active" tag='a' to='/car'>go about</fox-router-link>
    </div>
    <div class="my-router-view-div">
        <fox-router-view></fox-router-view>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useFox } from '../../assets/libs/fox-v3.0.0/index'
import { FoxApp } from './index'

export default defineComponent({
    setup() {
        //获取 fox
        let fox = useFox()!
        //安装fox app
        FoxApp.install(fox)
    },
})
</script>

<style scoped>

    .link-items{
        padding: 10px;
        display: -webkit-flex; /* Safari */
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items:center;
    }

   .fox-router-link-active{
       color:red
   }
</style>